<template>
  <div style="color:#fff">
    <div class="calendar-header">
      <div>
        <select v-model="selectedYear" @change="changeYear"
          style="background-color: #020613; border:none;font-size: 15px;appearance: none;outline: none;">
          <option v-for="year in years" :value="year">{{ year }}年</option>
        </select>
        <select v-model="selectedMonth" @change="changeMonth"
          style="background-color: #020613; border:none;outline: none;">
          <option v-for="(month, index) in months" :value="index">{{ month }}</option>
        </select>
      </div>
      <div>
        <span @click="prevWeek" class="icon-jiantou_liebiaoxiangyou"></span>
        <span @click="nextWeek" class="icon-jiantou_liebiaoxiangzuo"></span>
      </div>
    </div>
    <div class="calendar-body">
      <div>
        <div class="week-header">
          <div class="day-header">周日</div>
          <div class="day-header">周一</div>
          <div class="day-header">周二</div>
          <div class="day-header">周三</div>
          <div class="day-header">周四</div>
          <div class="day-header">周五</div>
          <div class="day-header">周六</div>
        </div>
        <div class="week">
          <div v-for="day in week " :class="['day', { 'highlight': isToday(day) }]" class="riQi">
            {{ day }}
            <div v-if="hasData1(day)" class="icon-dian1" style="margin: -30px -20px 0 0;"></div>
            <div v-if="hasData2(day)" class="icon-dian1" style="margin: 0 -20px 0 0;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedYear: new Date().getFullYear(), // 默认选择当前年份
      selectedMonth: new Date().getMonth(), // 默认选择当前月份
      months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      years: [], // 年份列表
      currentDate: new Date(), // 当前选中日期
      week: [], // 当前周的日期列表
      workday: [],
      logday: [],
    };
  },
  computed: {
  },
  mounted() {
    this.updateWeek();
    this.init();
    this.generateYearList();
  },
  methods: {
    init() {
      this.$api.GET('/realm/mine/info').then(res => {
        const year = this.selectedYear;
        const month = this.selectedMonth + 1;
        const selmonth = `${year}-${month.toString().padStart(2, '0')}`;
        const params = {
          createBy: res.data.id,
          selmonth: selmonth
        };
        // console.log('日志任务', params);
        this.$api.GET('/modules/doorCalendarTasks/workday', params).then(res => {
          console.log('日志任务', res.data);
          this.workday = res.data.calendar.map(c => {
            return c.taskDay.substring(8,10);
          });
          this.logday = res.data.tasks.map(c => {
            return c.taskDay.substring(8,10);
          });
          console.log(this.workday);
          // this.highlightDates = res.data.map(item => item.taskDay);
        })
      })
    },
    hasData1(day) {
      if(day < 10) {
        day = '0' + day;
      } else {
        day = '' + day;
      }
      return this.workday.includes(day); // 判断日期是否在workday数组中
    },
    hasData2(day) {
      if(day < 10) {
        day = '0' + day;
      } else {
        day = '' + day;
      }
      return this.logday.includes(day); // 判断日期是否在workday数组中
    },
    generateYearList() {
      const currentYear = new Date().getFullYear();
      const startYear = currentYear - 10; // 以当前年份为基准，向前推算10年
      const endYear = currentYear + 10; // 以当前年份为基准，向后推算10年
      for (let year = startYear; year <= endYear; year++) {
        this.years.push(year);
      }
    },
    updateWeek() {
      // 根据当前的选中年月和日期，计算当前周的日期列表
      const date = new Date(this.currentDate);
      date.setDate(date.getDate() - date.getDay()); // 将日期设置为本周第一天
      const week = [];
      for (let i = 0; i < 7; i++) {
        const day = new Date(date);
        day.setDate(day.getDate() + i);
        week.push(day.getDate());
      }
      this.week = week;
    },
    prevWeek() {
      // 切换到上一周
      const date = new Date(this.currentDate);
      date.setDate(date.getDate() - 7);
      this.currentDate = date;
      this.updateWeek();

      // 更新年份和月份选择框的值
      this.selectedYear = this.currentDate.getFullYear();
      this.selectedMonth = this.currentDate.getMonth();
    },
    nextWeek() {
      // 切换到下一周
      const date = new Date(this.currentDate);
      date.setDate(date.getDate() + 7);
      this.currentDate = date;
      this.updateWeek();
      // 更新年份和月份选择框的值
      this.selectedYear = this.currentDate.getFullYear();
      this.selectedMonth = this.currentDate.getMonth();
    },
    changeYear(event) {
      // 切换年份
      this.selectedYear = parseInt(event.target.value);
      const date = new Date(this.currentDate);
      date.setFullYear(this.selectedYear);
      this.currentDate = date;
      this.updateWeek();
    },
    changeMonth(event) {
      // 切换月份
      this.selectedMonth = parseInt(event.target.value);
      const date = new Date(this.currentDate);
      date.setMonth(this.selectedMonth);
      this.currentDate = date;
      this.updateWeek();
    },
    isToday(day) {
      const today = new Date();
      return (
        today.getFullYear() === this.currentDate.getFullYear() &&
        today.getMonth() === this.currentDate.getMonth() &&
        day === today.getDate()
      );
    },
  },
};
</script>

<style scoped>
select::-webkit-scrollbar {
  display: none;
}

.dot {
  width: 6px;
  height: 6px;
  background-color: #FF0000;
  border-radius: 50%;
  margin: -30px -20px 0 0;
}

.riQi {
  height: 45px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calendar-body {
  padding: 10px 0;
}

.week-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  color: #fff;
}

.day-header {
  width: 14.28%;
  text-align: center;
}

.week {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
}

.day {
  width: 14.28%;
  text-align: center;
  padding: 10px 0;
}

.highlight {
  background-color: #01D7F5;
  border-radius: 10%;
  padding: 10px 0;
}
</style>